<template>
  <div class="page-product-list">
    <basic-table-new
      ref="tableRef"
      api="http://localhost:3001/admin/pro/list"
      :apiParams="params"
      :columns="columns"
      :pagination="pagination"
      remote
    ></basic-table-new>
  </div>
</template>

<script>
import { h } from "vue";
import { NImage, NSwitch } from "naive-ui";
import { updateProductStatus } from "@/api/product";

export default {
  name: "product_list",

  data() {
    return {
      columns: [
        {
          title: "序号",
          key: "index",
          render: (row, index) => h("span", null, index + 1),
        },
        {
          title: "产品图片",
          key: "img1",
          render: (row) =>
            h(NImage, {
              height: 100,
              src: row.img1,
            }),
        },
        { title: "产品名称", key: "proname" },
        { title: "产品分类", key: "category" },
        { title: "产品品牌", key: "brand" },
        { title: "产品原价", key: "originprice" },
        { title: "产品折扣", key: "discount" },
        { title: "产品销量", key: "sales" },
        { title: "产品库存", key: "stock" },
        // { title: "是否上架", key: "issale" },
        {
          title: "是否上架",
          key: "issale",
          render: (row) =>
            h(NSwitch, {
              value: row.issale,
              checkedValue: 1,
              uncheckedValue: 0,
              onUpdateValue: (value) => {
                console.log("onUpdateValue", value);
                this.updateStatus(row.proid, "issale", value, row);
              },
            }),
        },
        {
          title: "是否秒杀",
          key: "isseckill",
          render: (row) =>
            h(NSwitch, {
              value: row.isseckill,
              checkedValue: 1,
              uncheckedValue: 0,
              onUpdateValue: (value) => {
                this.updateStatus(row.proid, "isseckill", value, row);
              },
            }),
        },
        {
          title: "是否推荐",
          key: "isrecommend",
          render: (row) =>
            h(NSwitch, {
              value: row.isrecommend,
              checkedValue: 1,
              uncheckedValue: 0,
              onUpdateValue: (value) => {
                this.updateStatus(row.proid, "isrecommend", value, row);
              },
            }),
        },
      ],
      params: {
        count: 1, // 页码
        limitNum: 5, // 每页显示的条数
      },
    };
  },

  computed: {
    pagination() {
      return {
        page: this.params.count,
        pageSize: this.params.limitNum,
        onChange: (page) => {
          this.params.count = page;
          this.$refs.tableRef.fetchData();
          // console.log("tableRef", this.$refs.tableRef);
        },
      };
    },
  },

  methods: {
    async updateStatus(proid, type, flag, row) {
      await updateProductStatus(proid, type, flag);
      // 让查询接口再调用一次
      // this.$refs.tableRef.fetchData();
      // 直接修改 row 对应字段的值
      row[type] = flag;
      this.$message.success("更新成功");
    },
  },
};
</script>
